<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title></title>
<style>
  div{ font-size:12px;}
  a:hover {
    font-size: 9pt;	color: #FF0000;
  }
  a {
    font-size: 9pt;	text-decoration: none;	color: #3C404D;
  }
  #box{
    width: 500px;
    height: 391px;
    margin: 5px auto;
  }
  .box ul{
    list-style:none;}
  .box ul li{
    font-family:"微软雅黑";
    margin:20px auto;}
  .box ul li:first-child{
    font-size:18px;
    font-weight:bolder;
    color:#669900}
.bottom span:last-child{
  display: block;
  float: right;
  width: 90%;
}
#box div:last-child{
  float: right;
  margin-right: 50px;
}
</style>
</head>

<body onLoad="showPage('add')">
<div id="box">
  <div class="box">
    <ul>
      <li id="type"></li>
      <li id="title"></li>
      <li id="content"></li>
    </ul>
  </div>
  <div><a href="#" onClick="showPage('reduce')">上一页</a>&nbsp;<a href="#" onClick="showPage('add')">下一页</a></div>
</div>
<script type="text/javascript">
  var txt='<?xml version="1.0" encoding="utf-8"?>\n' +
          '<meals>\n' +
          '<meal>\n' +
          '<type>早餐搭配</type>\n' +
          '<title>鸡蛋+全麦面包片+蔬菜汁</title>\n' +
          '<content>　　早餐一定要营养均衡搭配，鸡蛋富含蛋白质，为身体补充所需能量，面包片增加饱腹感，蔬菜汁能够促进肠胃的蠕动，清理肠道，为迎接新的一天做好准备。</content>\n' +
          '</meal>\n' +
          '<meal>\n' +
          '<type>午餐搭配</type>\n' +
          '<title>鸡胸肉+蔬菜+海鲜</title>\n' +
          '<content>　　脱脂鸡肉的热量较低，适合减肥女性，蔬菜是一日三餐都必不可少的，可以为人体补充足够的维生素，海鲜可以选择鱼类，鱼肉的蛋白质较高。</content>\n' +
          '</meal>\n' +
          '<meal>\n' +
          '<type>晚餐搭配</type>\n' +
          '<title>稀饭+水果+酸奶</title>\n' +
          '<content>　　晚餐尽量选择低脂、易消化的食物，且注意不宜吃的过饱。酸奶可以促进肠胃蠕动，稀饭和水果容易消化。</content>\n' +
          '</meal>\n' +
          '</meals>';
var xmldoc,typeNode,titleNode,contentNode;			//定义变量
if (window.DOMParser) {
    var parser=new DOMParser();
    xmldoc=parser.parseFromString(txt,"text/xml");
} else {// Internet Explorer
    xmldoc=new ActiveXObject("Microsoft.XMLDOM");
    xmldoc.async=false;
    xmldoc.loadXML(txt);
}
var meals = xmldoc.getElementsByTagName("meal");
var pages = meals.length;
var currentPage = 0;
function showPage(action){
	if(action=="add")
    	currentPage++;
    else
      	currentPage--;
    if(currentPage>=pages) currentPage=pages;
    else if(currentPage<=0) currentPage=1;
    var i=currentPage-1;
    typeNode=meals[i].getElementsByTagName("type");
    titleNode=meals[i].getElementsByTagName("title");
    contentNode=meals[i].getElementsByTagName("content");
    type.innerHTML=typeNode[0].firstChild.nodeValue;
    title.innerHTML=titleNode[0].firstChild.nodeValue;
    content.innerHTML=contentNode[0].firstChild.nodeValue;
}
</script>
</body>
</html>
